<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JsTree 树 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="/assets/plugins/custom/jstree/jstree.bundle.css" rel="stylesheet" type="text/css"/>

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
<style>
    /* 示例中ajax加载数据来源于权限，所以这里引用了css，实际使用时如不使用svg作为图标可以删除此处代码 */
    .jstree .permissions-icon,
    .jstree .e-svg-icon{
        display: inline-block;
        width: 18px;
        height: 24px;
        line-height: 26px;
        margin-right: 5px;
        text-align: center;
        vertical-align: top;
        color: #c1bfd0;
    }
    .jstree .e-svg-icon g [fill]{
        fill: #c1bfd0;
    }

    .jstree .permissions-icon.la {
        font-size: 1.5rem;
    }
</style>
<div class="row">
    <div class="col">
        <div class="alert alert-light alert-elevate fade show" role="alert">
            <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
            <div class="alert-text">
                jsTree树
                <a class="e-link e-font-bold" href="https://www.jstree.com/" target="_blank">官方文档</a>
                <a class="e-link e-font-bold" href="https://github.com/vakata/jstree" target="_blank">Github</a>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <!--begin::Portlet-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        基础
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <div id="tree-1" class="tree-demo">
                    <ul>
                        <li>
                            Root node 1
                            <ul>
                                <li data-jstree='{ "selected" : true }'>
                                    <a href="javascript:;">
                                        Initially selected </a>
                                </li>
                                <li data-jstree='{ "icon" : "fa fa-briefcase e-font-success " }'>
                                    custom icon URL
                                </li>
                                <li data-jstree='{ "opened" : true }'>
                                    initially open
                                    <ul>
                                        <li data-jstree='{ "disabled" : true }'>
                                            Disabled Node
                                        </li>
                                        <li data-jstree='{ "type" : "file" }'>
                                            Another node
                                        </li>
                                    </ul>
                                </li>
                                <li data-jstree='{ "icon" : "fa fa-warning e-font-danger" }'>
                                    Custom icon class (bootstrap)
                                </li>
                            </ul>
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            <a href="http://www.easy-frame.top">
                                Clickanle link node </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!--end::Portlet-->

        <!--begin::Portlet-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        自定义图标
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <div id="tree-2" class="tree-demo">
                    <ul>
                        <li>
                            Root node 1
                            <ul>
                                <li data-jstree='{ "selected" : true }'>
                                    <a href="javascript:;">
                                        Initially selected </a>
                                </li>
                                <li data-jstree='{ "icon" : "fa fa-briefcase e-font-success " }'>
                                    custom icon URL
                                </li>
                                <li data-jstree='{ "opened" : true }'>
                                    initially open
                                    <ul>
                                        <li data-jstree='{ "disabled" : true }'>
                                            Disabled Node
                                        </li>
                                        <li data-jstree='{ "type" : "file" }'>
                                            Another node
                                        </li>
                                    </ul>
                                </li>
                                <li data-jstree='{ "icon" : "fa fa-warning e-font-danger" }'>
                                    Custom icon class (bootstrap)
                                </li>
                            </ul>
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            <a href="http://www.easy-frame.top">
                                Clickanle link node </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!--end::Portlet-->

        <!--begin::Portlet-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        带CheckBox
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <div id="tree-3" class="tree-demo">
                </div>
            </div>
        </div>

        <!--end::Portlet-->
    </div>
    <div class="col-lg-6">

        <!--begin::Portlet-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        右键菜单
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <div id="tree-4" class="tree-demo">
                </div>
            </div>
        </div>

        <!--end::Portlet-->

        <!--begin::Portlet-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        拖动
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <div id="tree-5" class="tree-demo">
                </div>
            </div>
        </div>
        <!--end::Portlet-->
    </div>
</div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
<!--str:: 页面js -->
<script src="/assets/plugins/custom/jstree/jstree.bundle.js" type="text/javascript"></script>
<script src="/assets/js/demo1/pages/ui/assembly/js-tree.js" type="text/javascript"></script>
<!--str:: 页面js -->
</body>
</html>